<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>实时显示range改变字体大小</title>
<style type="text/css">
div{
margin:20px;
border:1px solid;
height:100px;
border-radius:10px;
text-align:center;
line-height:100px;


}
</style>
</head>
<body>
<div id="test">测试文本</div>
<input type="range" id="bar" min="0" max="50">

<span id="view"></span>
<script type="text/javascript">
    var bar = document.getElementById("bar");
    setInterval(function(){//使用setInterval实时获得range值，使用onchange事件属性的话，就不能实时显示了
    document.getElementById("view").innerHTML = bar.value+"px";
    document.getElementById("test").style.fontSize = bar.value+"px";
},1);
</script>
</body>
</html>
